<template>
  <t-modal
    :title="title"
    :width="700"
    :visible="visible"
    :switchFullscreen="true"
    :confirmLoading="loading"
    @ok="
      () => {
        $emit('ok');
      }
    "
    @cancel="
      () => {
        $emit('cancel');
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form :form="form">
        <a-row :gutter="16">
          <a-form-item class="hiddenItem">
            <a-input v-decorator="['uuid']" disabled type="hidden" />
          </a-form-item>
          <a-col class="gutter-row" :span="24">
            <a-form-item
              :label="$ct('affiliatedOrg', '所属机构')"
              :labelCol="{
                xs: {
                  span: 24,
                },
                sm: {
                  span: 3,
                },
              }"
              :wrapperCol="{
                xs: {
                  span: 24,
                },
                sm: {
                  span: 21,
                },
              }"
              style="position: relative;"
            >
              <!-- <depart-popup
                :placeholder="$ct('affiliatedOrg', '所属机构')"
                url="/mdata/organization/getTreeSysOrganization"
                v-decorator="[
                  'organizationId',
                  { rules: [{ required: true, message: '请选择所属机构' }] },
                ]"
              ></depart-popup> -->
              <div class="orgName-input">
                {{ orgName }}
              </div>
              <a-input
                style="opacity: 0;"
                placeholder="所属机构"
                disabled
                v-decorator="['organizationId']"
              />
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="12">
            <a-form-item
              :label="$ct('postName', '岗位名称')"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="岗位名称"
                v-decorator="[
                  'positionText',
                  { rules: [{ required: true, message: '必填' }] },
                ]"
              />
            </a-form-item>
          </a-col>
          <!-- <a-col class="gutter-row" :span="12">
            <a-form-item
              label="所属部门"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select
                placeholder="请选择所属部门"
                v-decorator="[
                  'dictDept',
                  { rules: [{ required: true, message: '请选择所属部门' }] },
                ]"
              >
                <a-select-option
                  :value="item.dicItemCode"
                  v-for="(item, index) in deptData"
                  :key="index"
                >
                  {{ item.dicItemName }}
                </a-select-option>
              </a-select>
              <a-input
                placeholder="所属部门"
                v-decorator="[
                  'dictDept',
                  { rules: [{ required: true, message: '必填' }] },
                ]"
              />
            </a-form-item>
          </a-col> -->
          <a-col class="gutter-row" :span="12">
            <a-form-item
              :label="$ct('formPostCode', '岗位代码')"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="岗位代码"
                v-decorator="[
                  'positionCode',
                  { rules: [{ required: true, message: '必填' }] },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="12">
            <a-form-item
              :label="$ct('state', '状态')"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-radio-group
                name="radioGroup"
                v-decorator="[
                  'positionStatus',
                  {
                    initialValue: '1',
                    rules: [{ required: true, message: '必填!' }],
                  },
                ]"
              >
                <a-radio :value="'1'">
                  {{ $ct("enable", "开启") }}
                </a-radio>
                <a-radio :value="'0'">
                  {{ $ct("close", "关闭") }}
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="12">
            <a-form-item
              :label="$ct('sort', '排序')"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-number
                placeholder="排序"
                v-decorator="[
                  'positionSort',
                  { rules: [{ required: false, message: '必填' }] },
                ]"
                :min="1"
              />
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="24">
            <a-form-item
              :label="$ct('remarks', '备注')"
              :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
              :wrapperCol="{ xs: { span: 24 }, sm: { span: 21 } }"
            >
              <a-textarea
                v-decorator="[
                  'positionRemark',
                  { rules: [{ required: false, message: '必填' }] },
                ]"
                :placeholder="$ct('remarks', '备注')"
                :auto-size="{ minRows: 2, maxRows: 6 }"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </t-modal>
</template>

<script>
import pick from "lodash.pick";
// 表单字段
const fields = [
  "uuid",
  "createTime",
  "creator",
  "creatorId",
  "modifier",
  "modifierId",
  "modifyTime",
  "positionText",
  "positionCode",
  "positionSort",
  "positionStatus",
  "positionType",
  "creatorOrgId",
  "positionRemark",
  "organizationId",
  "dictDept",
];

import TDictSelectTag from "@/components/TopVUI/dict/TDictSelectTag";
import TMultiSelectTag from "@/components/TopVUI/dict/TMultiSelectTag";
import { DepartPopup, PersonnelPopup } from "@/components";

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
    organization: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
    TDictSelectTag,
    TMultiSelectTag,
    DepartPopup,
    PersonnelPopup,
  },
  data() {
    return {
      deptData: [],
      orgName: "",
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 6,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 18,
        },
      },
      form: this.$form.createForm(this),
      title: "",
      treeData: [],
      organizationId: "",
    };
  },
  methods: {
    //查询部门列表
    getDeptList() {
      this.$post("/system/dicSet/getDicItemByCode", {
        code: "dictdept",
      })
        .then((res) => {
          let { data } = res;
          this.deptData = data ?? [];
        })
        .catch((_) => {
          this.deptData = [];
        });
    },
    add(m, data) {},
    edit(m, data) {},
    // 加载全部数据
    loadData() {
      let that = this;
      that.$post("/mdata/organization/getAllOrganizationData").then((res) => {
        if (res.length) {
          let subData = [];
          let child = [];
          res.forEach((e) => {
            if (e.pid == 1 && e.id != 1) {
              e.key = e.id;
              e.children = e.state === "closed" ? [] : "";
              subData.push(e);
            } else {
              child.push(e);
            }
          });
          that.treeData = that.getFilter(subData, child);
        }
      });
    },
    // 过滤
    getFilter(sourceData, children) {
      let arr = [];
      if (sourceData) {
        sourceData.forEach((e, index) => {
          children.forEach((c, index) => {
            if (e.id == c.pid) {
              c.key = c.id;
              c.children = c.state === "closed" ? [] : "";
              if (e.children) e.children.push(c);
            } else {
              c.key = c.id;
            }
          });
          if (e.children) {
            // 子级有数据的时候 循环添加数据
            this.getFilter(e.children, children);
          }
        });
        arr = sourceData;
      }
      return arr;
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getDeptList();
          let { orgName, id } = this.organization;
          this.orgName = orgName;
          this.form.setFieldsValue({ organizationId: id });
        }
      },
    },
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));
    // 当 model 发生改变时，为表单设置值
    this.$watch("model", () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields));
    });
    this.loadData();
  },
};
</script>
<style lang="less" scoped>
.orgName-input {
  position: absolute;
  top: -4px;
  left: 0;
  width: 100%;
  height: 32px;
  line-height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #f5f5f5;
  padding: 0 11px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
